<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<title>拓扑关系配置</title>
<meta charset="UTF-8">

<script src="media/js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/go.js"></script>
<script src="js/goinit.js"></script>
<script src="js/topologydrawer.js"></script>

<link href="css/flowmenu.css" rel="stylesheet" type="text/css"
	media="screen" />
	
<style>
	.modalhide{
		z-index:-99 !important;
	}
</style>

</head>
<body>
	<div id="topocanvas" style="padding: 5px;">
		<div
			style="width: 100%; display: flex; justify-content: space-between">
			<div id="myPaletteDiv"
				style="width: 100px; margin-right: 2px; background-color: whitesmoke; border: solid 1px black"></div>
			<div id="myDiagramDiv"
				style="flex-grow: 1; height: 700px; border: solid 1px black"></div>
		</div>

		<div class="control-group">
			<input type="text" class="span2 m-wrap" id="toponame"
				data-trigger="hover" />
			<button id="SaveButton">保存修改</button>
			<button id="LoadButton">重新加载</button>
		</div>
	</div>

	<div id="contextMenu">
		<ul>
			<li id="eventbind" onclick="cxcommand(event)"><a href="#"
				target="_self">事件绑定</a></li>
			<li class="divider"></li>
			<li id="cut" onclick="cxcommand(event)"><a href="#"
				target="_self">剪切</a></li>
			<li id="copy" onclick="cxcommand(event)"><a href="#"
				target="_self">复制</a></li>
			<li id="paste" onclick="cxcommand(event)"><a href="#"
				target="_self">粘贴</a></li>
			<li id="delete" onclick="cxcommand(event)"><a href="#"
				target="_self">删除</a></li>
		</ul>
	</div>

	<textarea id="mySavedModel" style="width: 100%; height: 300px"
		class="hide">
			{ "class": "go.GraphLinksModel",
			  "linkFromPortIdProperty": "fromPort",
			  "linkToPortIdProperty": "toPort",
			  "nodeDataArray": [
			 ],
			  "linkDataArray": [			
			 ]}
  	</textarea>
  	
  	<div class="modal fade modalhide" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
		
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close"></button>
					<h4 class="modal-title" id="myModalLabel">事件绑定</h4>
				</div> 
		
				<div class="modal-body">
					<div class="control-group">
						<label class="control-label span2">事件类型：</label>
						<div class="controls">
							<select class="span9 m-wrap" data-placeholder="请选择节点类型"
								tabindex="1" id="nodetype" onchange="changeNodeTypeSelect(this.selectedIndex)">
								<option value="">请选择</option>
								<option value="server">服务器</option>
								<option value="database">数据库</option>
								<option value="msgqueue">消息队列</option>
							</select>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label span2">事件源：</label>
						<div class="controls">
							<select class="span9 m-wrap" data-placeholder="请选择事件源"
								tabindex="1" id="nodesource">
								<option value="">请选择</option>								
							</select>
						</div>
					</div>

					<div class="control-group">
						<label class="control-label span2">描述信息：</label>
						<div class="controls">
							<input class="span3 m-wrap" type="text" id="nodedes"  />
						</div>
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭
					</button>
					<button type="button" id="btn_submit" class="btn btn-primary"
						data-dismiss="modal">
						<span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存
					</button>
				</div>
				
			</div>
		</div>
	</div>
	
	 <input id="svlist" type="hidden" value='${svlist}'>
	 <input id="dblist" type="hidden" value='${dblist}'> 
	 <input id="mqlist" type="hidden" value='${mqlist}'> 

</body>
</html>
